<template>
	<div class="main">
		<navTop></navTop>
		<!-- <div class="breadBox">
			<div style="margin:0 auto;" :style="screenWidth>1440?'width:1440px;;':'width:1200px;min-width:1200px;'">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>学校信息</el-breadcrumb-item>
					<el-breadcrumb-item>班级管理</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div> -->
		<div class="contentboxset">
			<div class="breadBox" :style="screenWidth > 1400 ? 'width:1400px;' : 'width:1200px;min-width:1200px;'">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item>作业</el-breadcrumb-item>
					<el-breadcrumb-item>学校信息</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<div class="contentMain">
			<div class="contentmaincontent" :style="screenWidth>1400?'width:1400px;':'width:1200px;min-width:1200px;'">
				<div class="searchlist">
					<router-link to="/studentinfo" active-class="hover">学生信息</router-link>
					<router-link to="/teacherinfo" active-class="hover">教师信息</router-link>
					<router-link to="/grademanagement" active-class="hover">年级管理</router-link>
					<router-link to="/classmanagement" active-class="hover">班级管理</router-link>
					<router-link to="/subjectmanagement" active-class="hover">科目管理</router-link>
					<!-- <router-link to="/subjectselectionmanagement" active-class="hover">选科管理</router-link> -->
					<router-link to="/topicmanagement" active-class="hover">题型管理</router-link>
					<!-- <router-link to="/" active-class="hover">上线管理</router-link> -->
					<!-- <router-link to="/taskset" active-class="hover">任务设置 </router-link> -->
				</div>
				<div class="gradeContent">
					<!-- <div style="display: flex;align-items: center;">
						<em class="addxbbutton">手动升学</em>
						<i style="font-size:14px;color:#EC555A;line-height:34px;margin-top:24px;margin-left:14px;font-style:normal">注意：年级会从上至下顺序逐年自动升学</i>
					</div> -->
					<ul v-for="(item,parentIndex) in gradelist">
						<li v-for="(childeritem,index) in item.grades">
							<div class="gradeTitle">
								<h3>学部：<el-input class="elinputxb" v-if="index === classeditishow" v-model="childeritem.name"></el-input><i v-else style="font-style: normal;" >{{childeritem.name}}</i></h3>
								<span v-if="index === classeditishow">
									<i @click="surepreservation(index)">保存</i>
									<i style="background:#999;" @click="cancelbox(index)">取消</i>
								</span>
								<span v-if="index === editingModuleIndex">
									<i @click="surepreservation(index)">保存</i>
									<i style="background:#999;" @click="cancelbox(index)">取消</i>
								</span>
								<!-- <span v-else> 
									<i @click="classedit(index)">编辑</i>
									<i>删除</i>
								</span> -->
							</div>
							<div class="gradelist">
								<div v-if="index === classeditishow">
									<div v-for="children in childeritem.classes" class="finputboxset" >
									<img src="../../assets/image/school/xd.png" width="14" alt="">
									<el-input v-model="children.name"></el-input>
									</div>
								</div>
								<div v-else>
									<b v-for="children in childeritem.classes">
										<img src="../../assets/image/school/xd.png" width="14" alt="">
										{{children.name}}
									</b>
								</div>
								<div v-for="input in gradelist[parentIndex].grades[index].inputlist" v-if="index === editingModuleIndex" class="finputboxset" >
								<img src="../../assets/image/school/xd.png" width="14" alt="">
								<el-input v-model="input.name"></el-input>
								</div>
								<!-- <i @click="addgrade(parentIndex,index)"><img src="../../assets/image/school/addxd.png" width="14">添加新年级</i> -->
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/homework/headtop.vue"
	import { get, post, del, put } from '../../request/api.js'
	import { mapGetters } from 'vuex';
	export default{
		computed: {
			...mapGetters(['getScreenWidth']),
			screenWidth() {
			return this.getScreenWidth;
			},
		},
		data(){
			return{
				gradelist:[],
				classeditishow:-1,
				inputlist:[],
				 editingModuleIndex: -1,
			}
		},
		mounted() {
			this.classtab()
		},
		methods:{
			classedit(index){
				this.classeditishow = index
			},
			classtab(){
				get('/period/alllist')
				.then(res=>{
					if(res.code==200){
						// //console.info(res.data)
						this.gradelist = res.data
					}else{
						this.$message.error(res.message);
					}
				})
				.catch(error=>{
					this.$message.error(error.message);
				})
			},
			addgrade(parentIndex, index) {
			   // 确保 inputlist 存在
			     if (!this.gradelist[parentIndex].grades[index].inputlist) {
			       this.$set(this.gradelist[parentIndex].grades[index], 'inputlist', []);
			     }
			   
			     // 添加新对象
			     let obj = { name: '' };
			     this.gradelist[parentIndex].grades[index].inputlist.push(obj);
			   
			     // 更新编辑索引
			     this.editingModuleIndex = index;
			   
			    //  //console.info(this.gradelist[parentIndex].grades[index].inputlist);
			},
			//取消
			cancelbox(index){
				this.classeditishow = -1
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		min-height:100vh;
		;
		background: #F4F7FD;
	}
	
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:30px;
	}
	.contentboxset {
	background: #fff;
	height: 32px;
	border-top: solid 2px #F4F7FD
}

.breadBox {
	width: 1440px;
	margin: 0 auto;
	min-width: 1200px;
	line-height: 32px;
}
	.el-breadcrumb{
		width:auto;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.contentmaincontent{
		width:1440px;
		;
		margin:0 auto;
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.gradeContent{
		height:calc(100vh - 200px);
		background:#fff;
		border-radius:10px;
		margin-top:14px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.gradeContent::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.gradeContent::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.gradeContent::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.gradeContent ul{
		display: flex;
		flex-wrap: wrap;
		padding:24px;
	}
	.gradeContent ul li{
		width:355px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
		margin-right:37px;
		margin-bottom:40px;
		position:relative
	}
	.gradeContent ul li::after{
		content: '';
		width:26px;
		height:26px;
		background: url(../../assets/image/school/bz.png) no-repeat center center;
		position: absolute;
		background-size:contain;
		right:-46px;
		top:50%;
		transform: translateX(-50%);
	}
	.gradeContent ul li:last-child::after{
		content: '';
		width:26px;
		height:26px;
		background:none;
		position: absolute;
		background-size:contain;
		right:-46px;
		top:50%;
		transform: translateX(-50%);
	}
	.gradeContent ul li:nth-child(3n)::after{
		content: '';
		width:26px;
		height:26px;
		background:none;
		position: absolute;
		background-size:contain;
		right:-46px;
		top:50%;
		transform: translateX(-50%);
	}
	.gradeContent ul li:nth-child(3n){
		margin-right:0;
	}
	.gradeTitle{
		height: 42px;
		background: #E8F0FA;
		border-radius: 10px 10px 0px 0px;
		padding:0 14px;
		color:#2A303B;
		font-size:14px;
		line-height:42px;
		font-weight:normal;
		display: flex;
		justify-content: space-between;
	}
	.gradeTitle span{
		display: flex;
		align-items: center;
	}
	.gradeTitle span i{
		display: inline-block;
		width: 56px;
		height: 26px;
		border-radius: 4px;
		font-size:14px;
		text-align: center;
		line-height:26px;
		font-style: normal;
		color:#fff;
		margin-left:8px;
		cursor: pointer;
	}
	.gradeTitle span i:first-child{
		background: #295CFF;
	}
	.gradeTitle span i:last-child{
		background: #EC555A;
	}
	.gradeTitle h3{
		font-weight: normal;
	}
	.gradelist{
		padding:0px 0;
		font-size:14px;
		color:#2A303B;
	}
	.gradelist b{
		display: flex;
		align-items: center;
		font-weight: normal;
		text-align: left;
		padding:0 20px;
		line-height:42px;
	}
	.gradelist b:nth-child(2n){
		background-color: #FAFAFB;
	}
	.gradelist b img,.gradelist i img{
		display: inline-block;
		margin-right:5px;
	}
	.gradelist i{
		display: flex;
		align-items: center;
		line-height:42px;
		padding:0 20px;
		color:#295CFF;
		font-style: normal;
		font-size: 14px;
		cursor: pointer;
		background:#FAFAFB;
		border-radius: 0 0 10px 10px;
	}
	.addxbbutton{
		display: block;
		width: 124px;
		height: 34px;
		background: #295CFF;
		border-radius: 10px;
		text-align: center;
		line-height:34px ;
		font-size:14px;
		color:#fff;
		font-style: normal;
		margin:24px 0 0 24px;
		cursor: pointer;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
	.gradeTitle >>> .elinputxb{
		width:138px;
	}
	.gradeTitle >>> .el-input__inner{
		border:none;
		background:none;
		padding:0px;
		font-size:16px;
		color:#333;
		border-bottom:solid 1px #333;
	}
	.finputboxset{
		display: flex;
		align-items: center;
		padding:0 20px;
	}
	.finputboxset >>> .el-input__inner{
		border:none;
		background:none;
		padding:0px 8px;
		font-size:14px;
		color:#333;
		border-bottom:solid 1px #333;
	}
</style>